import React, { Component } from 'react';
import { Spin, Icon } from 'antd';
import Link from 'umi/link';
import { connect } from 'dva';

const StatusIcon = ({ status, text }) => (
  <span>
    <Icon
      type={(status === 'success' || status === 'unrealName') ? "check-circle" : 'close-circle'}
      style={{
        color: status === 'success' ? '#52C41A' : status === 'fail' ? 'red' : '#666',
        marginLeft: 15, marginRight: 5
      }} />
    {text} <span></span>
  </span>
);
@connect(({ loading, userCenter: { information } }) => ({
  loading: loading.effects['userCenter/queryUserInformation'],
  information,
}))
class UserInformation extends Component {

  componentDidMount() {
    this.props.dispatch({
      type: 'userCenter/queryUserInformation',
    });
  }
 
  isBindInfo = (status) => {
    if (status == 0) {
      return (
        <span>
          <StatusIcon status="unrealName" text="未实名认证" /><Link to={`/userCenter/authentication?typeName=${'creat'}`}>认证</Link>
        </span>
      )
    } else if (status == 1) {
      return (
        <span>
          <StatusIcon status="unrealName" text="实名认证审核中" />
        </span>
      )
    } else if (status == 2) {
      return (
        <span>
          <StatusIcon status="success" text="已实名认证" /><Link to={`/userCenter/authentication?typeName=${'creatNew'}`}>重新认证</Link>
        </span>
      )
    } else if (status == 3) {
      return (
        <span>
          <StatusIcon status="fail" text="实名认证未通过" /><Link to={`/userCenter/authentication?typeName=${'creatNew'}`}>重新认证</Link>
        </span>
      )
    }
  }

  render() {
    const { loading, information } = this.props;
    console.log(information)
    // information.e
    // mail = '1136114589@qq.com'
    return (
      <Spin spinning={!!loading}>
        <div style={{ backgroundColor: '#FCFCFC', padding: 20, height: 528, marginTop: 20 }}>
          <p>
            姓名:{information.name || '张三'}
            {/* {this.isBindInfo(information.status)} */}
            {this.isBindInfo(2)}
          </p>
          <p>手机：{information.mobile && (information.mobile.substr(0, 3) + '****' + information.mobile.substr(7, 11))} <Link to="/userCenter/editPhone">修改</Link></p>
          <p>邮箱：
            {
              information.email ?
                <span>
                  {/* <span style={{marginRight:10}}>{information.email}</span><Link to="/userCenter/editPassword">修改</Link> */}
                  <StatusIcon status="success" text={information.email} /><Link to="/userCenter/bindEmail">修改</Link>
                </span>
                :
                <span>
                  <StatusIcon status="fail" text="尚未绑定邮箱" /><Link to="/userCenter/bindEmail">绑定</Link>
                </span>
            }

          </p>
          <p>
            密码： <Link to="/userCenter/editPassword">修改</Link>
          </p>
        </div>

      </Spin>
    );
  }
}

export default UserInformation;
